<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- 
	Do you like my work? Are you from big international company? 
	HIRE ME -> www.pk69.com/#say_hello 
-->

<?
$res = "v027";
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="resources/css/application.css?<? echo $res; ?>" rel="stylesheet" type="text/css" />
<link href="resources/css/scale.factor.css?<? echo $res; ?>" rel="stylesheet" type="text/css" />
<title>Visual HUD: Quake Live online HUD generator</title>
</head>
<body class="app-loading">
<div id="preloader">
	<div class="indicator">Please, wait...</div>
</div>
<div id="appWrapper">
	<div class="app-header">
		<h1 class="logo"><span>Quake Live Visual HUD</span></h1>
		<div class="app-global-actions hidden"> Online HUD generator </div>
		<img src="resources/images/ql_logo.png" class="ql-logo" width="42" height="42" />
		<ul class="app-nav">
			<li><a href="help/newfeatures.html"><strong>New features!</strong></a></li>
			<li><a href="#report" title="Report a bug" id="reportBugLink">Bugs!</a></li>
			<li><a href="help/" target="_blank">Help</a></li>
			<li><a href="help/videos.html">Video tutorials</a></li>
		</ul>
	</div>
	<div class="clearfloat">
		<div class="main-panel">
			<div class="hud-canvas" id="hudCanvas">
				<div class="canvas-extras">
					<div class="hud-weapon"></div>
					<div class="hud-crosshair"></div>
					<div class="weapon-bar"></div>
					<div class="team-overlay"></div>
					<div class="lag-o-metr"></div>
					<div class="speed-o-metr"></div>
					<div class="pickup-message"></div>
					<div class="demo-rec-message"></div>
				</div>
				<div class="hud-elements grid-0">
				</div>
			</div>
			<ul class="app-toolbar" id="canvasToolbar">
				<li class="root-item shot-toggle" title="Change location background"> <span class="item-name">Screenshot:</span><strong class="item-value hidden">0</strong>
					<ul>
						<li>
							<label>
							<input type="radio" name="canvasShot" value="0" />
							<span>None</span></label>
						</li>
						<li>
							<label>
							<input type="radio" name="canvasShot" value="1" checked="checked" />
							<span>Longest Yard</span></label>
						</li>
						<li>
							<label>
							<input type="radio" name="canvasShot" value="2" />
							<span>Almost Lost</span></label>
						</li>
					</ul>
				</li>
				<li class="root-item grid-toggle" title="Toggle grid"> <span class="item-name">grid:</span><strong class="item-value">0</strong>
					<ul>
						<li>
							<label>
							<input type="radio" name="drawGrid" value="0" checked="checked" />
							<span>off</span></label>
						</li>
						<li>
							<label>
							<input type="radio" name="drawGrid" value="5" />
							<span>5px</span></label>
						</li>
						<li>
							<label>
							<input type="radio" name="drawGrid" value="10" />
							<span>10px</span></label>
						</li>
					</ul>
				</li>
				<li class="root-item grid-snap" title="Snap element to grid"> <span class="item-name">Snap:</span><strong class="item-value">0</strong>
					<ul>
						<li>
							<label>
							<input type="radio" name="snapGrid" value="0" checked="checked" />
							<span>off</span></label>
						</li>
						<li>
							<label>
							<input type="radio" name="snapGrid" value="5" />
							<span>5px</span></label>
						</li>
						<li>
							<label>
							<input type="radio" name="snapGrid" value="10" />
							<span>10px</span></label>
						</li>
					</ul>
				</li>
				<li class="root-item player-status"> <span class="item-name">Status</span>
					<ul></ul>
				</li>
				<li class="root-item hud-extras"> <span class="item-name">Extras</span><strong class="item-value">1</strong>
					<ul>
						<li>
							<label>
							<input type="checkbox" name="lagometr" value="1" />
							<span>Lagometr</span></label>
						</li>
						<li>
							<label>
							<input type="checkbox" name="speedometr" value="1" />
							<span>Speedometr</span></label>
						</li>
						<li>
							<label>
							<input type="checkbox" name="pickup" value="1" />
							<span>Item Pickup</span></label>
						</li>
						<li>
							<label>
							<input type="checkbox" name="recordingMessage" value="1" />
							<span>Recording Message</span></label>
						</li>

					</ul>
				</li>
				<li class="root-item draw-gun"> <span class="item-name">gun:</span><strong class="item-value">1</strong>
					<ul>
						<li>
							<label>
							<input type="radio" name="drawGun" value="0" />
							<span>Hidden</span></label>
						</li>
						<li>
							<label>
							<input type="radio" name="drawGun" value="1" checked="checked" />
							<span>Right</span></label>
						</li>
						<li>
							<label>
							<input type="radio" name="drawGun" value="2" />
							<span>Center</span></label>
						</li>

					</ul>
				</li>
				<li class="root-item"> <span class="item-name">weapon bar:</span><strong class="item-value">1</strong>
					<ul>
						<li>
							<label>
							<input type="radio" name="drawWeaponbar" value="0" />
							<span>Hidden</span></label>
						</li>
						<li>
							<label>
							<input type="radio" name="drawWeaponbar" value="1" checked="checked" />
							<span>Left</span></label>
						</li>
						<li>
							<label>
							<input type="radio" name="drawWeaponbar" value="2" />
							<span>Right</span></label>
						</li>
						<li>
							<label>
							<input type="radio" name="drawWeaponbar" value="3" />
							<span>Bottom</span></label>
						</li>
						<li>
							<label>
							<input type="radio" name="drawWeaponbar" value="4" />
							<span>Q3A Style</span></label>
						</li>						
					</ul>
				</li>
				<li class="root-item"> <span class="item-name">Team overlay:</span><strong class="item-value">0</strong>
					<ul>
						<li>
							<label>
							<input type="radio" name="drawTeamoverlay" value="0" checked="checked" />
							<span>off</span></label>
						</li>
						<li>
							<label>
							<input type="radio" name="drawTeamoverlay" value="1" />
							<span>top</span></label>
						</li>
						<li>
							<label>
							<input type="radio" name="drawTeamoverlay" value="2" />
							<span>bottom</span></label>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<div class="prop-panel" id="settingsArea">
			<div class="p-20 " id="stageControls">
            	<div class="control-header">
					<h2>Get started</h2>
                 </div>
				<div class="mb-15">Use icons below to start building yor HUD. You can use drag and drop or double click in order to create new HUD element</div>
				<div class="starter-block">
					<h4>HUD Elements</h4>
					<ul class="library-items clearfloat">
						<li class="add-health"><span class="item-name">Add health counter</span></li>
					</ul>
				</div>
				<div class="starter-block">
					<h4>Shapes</h4>
					<ul class="library-items icons-32px clearfloat" id="drawControls">
						<li class="draw-line disabled" id="drawLine"><span class="item-name">Draw line (N)</span></li>
						<li class="draw-rect" id="drawRect"><span class="item-name">Draw rectangle (R)</span></li>
					</ul>
				</div>
				<div class="mt-20">
					<button value="New hud" class="button-main" id="downloadButton"><span class="w-icon download">Download</span></button>
					<a href="/." class="ml-15" onclick="location.reload(); return false;" id="restartAppLink">Restart</a>
				</div>	
				<ul class="app-toolbar" id="presetManager">
					<li class="root-item switch-large" title="Large editor" id="switchLarge"> <span class="item-name">Large editor</span></li>
					<li class="root-item switch-compact" title="Compact editor" id="switchCompact"> <span class="item-name">Compact editor</span></li>
					<li class="root-item bug" title="Report a bug" id="reportBugButton"> <span class="item-name">Report a bug</span></li>				
					<li class="root-item load" title="Load preset" id="loadPresetButton"> <span class="item-name">Load HUD</span></li>
				</ul>					
			</div>
			<div class="p-20 hidden" id="groupActionsPanel">
				<div class="mb-15">Align multiple elements.</div>
				<ul class="library-items align-controls icons-24px clearfloat" id="alignControls">
					<li class="align-top"><span class="item-name">Align top edges</span></li>
					<li class="align-vertical"><span class="item-name">Align vertical centers</span></li>
					<li class="align-bottom"><span class="item-name">Align bottom edges</span></li>
					<li class="align-left"><span class="item-name">Align left edges</span></li>
					<li class="align-horizontal"><span class="item-name">Align horizontal centers</span></li>
					<li class="align-right"><span class="item-name">Align right edges</span></li>
				</ul>
				<ul class="library-items arrange-controls icons-24px clearfloat hidden" id="arrangeControls">
					<li class="bring-front"><span class="item-name">Bring to front <small>(CTRL + SHIFT + UP)</small></span></li>
					<li class="send-back"><span class="item-name">Send to back <small>(CTRL + SHIFT + DOWN)</small></span></li>
					<li class="bring-forward"><span class="item-name">Bring forward <small>(CTRL + UP)</small></span></li>
					<li class="send-backward"><span class="item-name">Send backward <small>(CTRL + DOWN)</small></span></li>
				</ul>
				<div class="mt-20 group-actions-panel">
					<button value="Delete selected items" class="button-main delete-items"><span class="w-icon trash">Delete selected items</span></button>
				</div>
			</div>
		</div>
	</div>
	<div class="app-footer">
		<div class="clearfloat">
			<div class="f-left w-50">
				QUAKE LIVE, QUAKE and ID are trademarks or registered trademarks of Id Software LLC in the United States and/or other countries.
			</div>
			<div class="a-right w-50 clear-right">
				<span class="v-middle d-iblock mr-10">
					<a href="credits.html" target="_blank">Made by Pavel Kiselyov</a><br />
					&copy; 2010 All rights reserved
				</span>
				
				<img src="resources/images/pk69logo.png" width="32" height="32" class="v-middle" />				
			</div>
		</div>		
	</div>
</div>

<div id="errorReportFormWindow" style="display:none;">
	<div class="xpk-mwindow-wrap">
		<div class="xpk-mwindow-content">
			<div class="xpk-win-head clearfloat">
				<div class="xpk-win-title"></div>
				<a href="#" class="xpk-close-button"><span class="hidden">x</span></a>
			</div>
			<div class="xpk-win-content clearfloat">
				<div class="info-block mb-10"> Want to help? Send as much details as you can, especially describing your actions. This way I can easely reproduce the problem and fix it.
					Here is an example of good bug report:
					<blockquote class="mt-10">"I was clicking [Apply] button and get an error message."</blockquote>
				</div>
				<form action="/contact.php" method="post" class="app-form" id="errorReportForm">
					<fieldset>
					<label class="f-row"> <span class="f-label">Name:</span><span class="f-inputs">
					<input type="text" name="name" size="32">
					</span> </label>
					<label class="f-row hidden"> <span class="f-label">Email:</span><span class="f-inputs">
					<input type="text" name="email" size="32" value="demo@pk69.com">
					</span> </label>
					<label class="f-row l-vertical"> <span class="f-label">Message:</span><span class="f-inputs">
					<textarea name="comments" rows="6" cols="30"></textarea>
					</span> </label>
					<div class="f-row">
						<button type="submit" value="Send" class="button-main mr-5"><span>Send</span></button>
						<button type="button" value="Send" class="" onclick="$.xpkWindow.cancel(); return false;"><span>Cancel</span></button>
					</div>
					</fieldset>
				</form>
			</div>
		</div>
	</div>
</div>

<div id="importHUDWindow" style="display:none;">
	<div class="xpk-mwindow-wrap">
		<div class="xpk-mwindow-content">
			<div class="xpk-win-head clearfloat">
				<div class="xpk-win-title"></div>
				<a href="#" class="xpk-close-button"><span class="hidden">x</span></a>
			</div>
			<div class="xpk-win-content clearfloat">
				<div class="info-block mb-10"> 
					You can load predefined HUD or import custom HUD previously build with Visual HUD application. In order to import custom HUD, select appropriate option from drop down below and click [Load] button.
				</div>
			
				<form class="app-form" id="importHUDForm">
					<fieldset>
						<label class="f-row">
							<span class="f-label">Preset:</span><span class="f-inputs"><select name="preset">
							</select></span>
						</label>
						<label class="f-row l-vertical custom-hud"><span class="f-label">Code:</span><span class="f-inputs">
							<textarea name="customHUD" rows="6" cols="30"></textarea>
							<div class="f-hint">Custom HUD code can be found at *.vhud file. <a href="/help/import.html" target="_blank">Learn more</a></div>
						</span> </label>
						<div class="f-row">
							<button type="submit" name="importHUD" value="Load" class="button-main mr-5"><span class="w-icon load">Load</span></button>
							<button type="button" name="cancel" value="Cancel" class="" onclick="$.xpkWindow.cancel(); return false;"><span>Cancel</span></button>
						</div>
					</fieldset>
				</form>
			</div>
		</div>
	</div>
</div>

<div id="downloadHUDWindow" style="display:none;">
	<div class="xpk-mwindow-wrap">
		<div class="xpk-mwindow-content">
			<div class="xpk-win-head clearfloat">
				<div class="xpk-win-title"></div>
				<a href="#" class="xpk-close-button"><span class="hidden">x</span></a>
			</div>
			<div class="xpk-win-content clearfloat">
				<div class="info-block mb-10"> 
					<p>You are about to download your custom HUD. Please, name it and click [Download] button. </p>
					Don't know how to use a custom HUD? Check out holysh1t's custom <a href="http://www.holysh1t.net/quakelive-custom-hud-install-guide/" target="_blank">HUD install guide</a>.
				</div>
			
				<form class="app-form" id="downloadHUDForm" action="download.php" method="post">
					<input type="hidden" name="hud_data" />
					<fieldset>
						<label class="f-row">
							<span class="f-label">HUD name:</span><span class="f-inputs"><input type="text" name="hud_name" size="32" maxlength="128">
							<div class="f-hint">HUD name should be at least 3 characters length and contain only letters and numbers</div>
							</span>
						</label>
						<div class="f-row">
							<button type="submit" name="downloadHUD" value="Load" class="button-main mr-5"><span class="w-icon download">Download</span></button>
							<button type="button" name="cancel" value="Cancel" class="" onclick="$.xpkWindow.cancel(); return false;"><span>Cancel</span></button>
						</div>
					</fieldset>
				</form>
			</div>
		</div>
	</div>
</div>

<div id="importBackgroundWindow" style="display:none;">
	<div class="xpk-mwindow-wrap">
		<div class="xpk-mwindow-content">
			<div class="xpk-win-head clearfloat">
				<div class="xpk-win-title"></div>
				<a href="#" class="xpk-close-button"><span class="hidden">x</span></a>
			</div>
			<div class="xpk-win-content clearfloat">
				<div class="info-block mb-10"> 
					<p>You are about to download your custom HUD. Please, name it and click [Download] button. </p>
					Don't know how to use a custom HUD? Check out holysh1t's custom <a href="http://www.holysh1t.net/quakelive-custom-hud-install-guide/" target="_blank">HUD install guide</a>.
				</div>
			
				<form class="-app-form" method="post">
					<input type="hidden" name="hud_data" />
						<div class="f-row mb-10" style="position:relative;">
							<button type="button" class="mr-5"><span class="">Choose file...</span></button>
							<span class="file-name-span">No File Choosen</span>
							<div style="clip: rect(auto, auto, auto, 0px);height: 28px;left: 0;opacity: 0;position: absolute;text-align: left;top: 0;width: 120px;">
								<input type="file" style="    cursor: pointer;
												float: right;
												font-size: 32px;
												left: -70%;
												position: absolute;
												width: 1px;" size="1" />
							</div>
						</div>
						
						<div class="f-row">

							<button type="submit" name="importBackground" value="Load" class="button-main mr-5"><span class="w-icon download">Import</span></button>
							<button type="button" name="cancel" value="Cancel" class="" onclick="$.xpkWindow.cancel(); return false;"><span>Cancel</span></button>
						</div>
				</form>
			</div>
		</div>
	</div>
</div>

<!--[if lte IE 7]>
<div id="outdatedIE">
	<div class="content">
		You are using outdated browser that is not supported by Visual HUD application.<br />
		I suggest to use <a href="http://www.google.com/chrome">Google Chrome</a>, <a href="http://firefox.com">Mozilla Firefox</a> or latest version of <a href="http://www.microsoft.com/windows/internet-explorer">Microsoft Internet Explorer</a>
	</div>
</div>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="resources/js/jquery.color.js"></script>
<script type="text/javascript" src="resources/js/jquery.cookie.js"></script>
<script type="text/javascript" src="resources/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="resources/js/json.js"></script>
<script type="text/javascript" src="resources/js/rangeinput.js"></script>
<script type="text/javascript" src="resources/js/string.format-1.0.js"></script>

<script type="text/javascript" src="resources/js/xpk.core.js"></script>
<script type="text/javascript" src="resources/js/xpk.dhtml.panel.js"></script>
<script type="text/javascript" src="resources/js/xpk.drag.base.js"></script>
<script type="text/javascript" src="resources/js/xpk.growl.js"></script>
<script type="text/javascript" src="resources/js/xpk.hint.js"></script>
<script type="text/javascript" src="resources/js/xpk.window.js"></script>
<script type="text/javascript" src="resources/js/xpk.menu.js"></script>

<script type="text/javascript" src="resources/js/visual.hud.core.js?<? echo $res; ?>"></script>
<script type="text/javascript" src="resources/js/visual.hud.draginterface.js?<? echo $res; ?>"></script>
<script type="text/javascript" src="resources/js/visual.hud.imageimport.js?<? echo $res; ?>"></script>
<script type="text/javascript" src="resources/js/visual.hud.formgenerator.js?<? echo $res; ?>"></script>
<script type="text/javascript" src="resources/js/visual.hud.application.js?<? echo $res; ?>"></script>
<script type="text/javascript" src="resources/js/visual.hud.formcontrols.js?<? echo $res; ?>"></script>
<script type="text/javascript" src="resources/js/visual.hud.itemsmanager.js?<? echo $res; ?>"></script>
<script type="text/javascript" src="resources/js/visual.hud.utils.js?<? echo $res; ?>"></script>
<script type="text/javascript" src="resources/js/visual.hud.presets.js?<? echo $res; ?>"></script>
<script>
	$(document).ready($.proxy(visualHUD.application, 'init'));
</script>

</body>
</html>
